<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap4.5.min.css">
    <style>
        li {
            list-style: none;
        }
        
        ul {
            margin: 0;
            padding: 0;
        }
        
        .row {
            margin: 0;
        }
        
        @media (min-width:576px) {
            .container {
                max-width: 576px;
                padding: 0;
            }
        }
        
        @media (min-width:768px) {
            .container {
                max-width: 768px;
                padding: 0;
            }
        }
        
        @media (min-width:992px) {
            .container {
                max-width: 992px;
                padding: 0;
            }
        }
        
        @media (min-width:1200px) {
            .container {
                max-width: 1200px;
                padding: 0;
            }
        }
        
        .Super_title {
            text-align: center;
        }
        
        .Super_list_img img {
            width: 100%;
        }
        
        .Super_list_box {
            text-align: center;
        }
        
        .Super_list_box h4 {
            font-size: 80px;
            color: #7986cc;
        }
        
        .Super_list_box span,
        p {
            color: #999999;
        }
        
        .Super_list_box p {
            padding: 50px 0;
        }
        
        .Super_list ul li:nth-child(2) {
            border-left: 1px solid #eeeeee;
            border-right: 1px solid #eeeeee;
        }
        
        .Super_list {
            padding: 50px 0;
        }
        
        .Super_list_img {
            overflow: hidden;
        }
        
        .Super_list_img:hover img {
            transition: .6s;
            transform: scale(1.2);
        }
        
        .Super_list_box:hover h4,
        span,
        h6,
        p {
            transition: .8s;
            transform: rotate3d(90deg);
        }
        
        .Super {
            padding: 50px 0;
        }
        
        @media(max-width:768px) {
            .Super_list ul li:nth-child(2) {
                border: none;
            }
        }
    </style>
    <title>超跑系列</title>
</head>

<body>
    <div class="Super">
        <div class="container">
            <div class="Super_title">
                <h2>服务范围</h2>
                <span>SERVICE</span>
            </div>
            <div class="Super_list">
                <ul class="row">
                    <li class="col-lg-4 col-md-4 col-12">
                        <div class="Super_list_box">
                            <h4>01</h4>
                            <span>——</span>
                            <h6>A系列</h6>
                            <p>以先进的环保技术，安全技术，舒适技术，让你驰享无尽乐趣。</p>
                            <div class="Super_list_img">
                                <img src="img/Super/img1.webp" alt="">
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-4 col-12">
                        <div class="Super_list_box">
                            <h4>02</h4>
                            <span>——</span>
                            <h6>Q系列</h6>
                            <p>带你见证更出色的生活，也邀你走进，更有乐趣的未来。</p>
                            <div class="Super_list_img">
                                <img src="img/Super/img2.webp" alt="">
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-4 col-12">
                        <div class="Super_list_box">
                            <h4>03</h4>
                            <span>——</span>
                            <h6>R系列</h6>
                            <p>专业科技，就为了给您移动带来更多的乐趣体验，为您出行提供便利。</p>
                            <div class="Super_list_img">
                                <img src="img/Super/img3.webp" alt="">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>